{extend name="public:base"}
{block name="main"}
<script type="text/javascript" src="__Com__/chart/echarts.common.min.js"></script>
<div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box" style="background:#F3F3F3;">
            <span class="info-box-icon bg-aqua"><i class="fa fa-calculator"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">商品</span>
              <span class="info-box-number">全部：{$good['good']['all']}<small>件</small></span>
              <span class="info-box-number">有效：{$good['good']['online']}<small>件</small></span>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box" style="background:#F3F3F3;">
            <span class="info-box-icon bg-red"><i class="fa fa-calendar"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">大淘客</span>
              <span class="info-box-number">全部：{$good['dataoke']['all']}<small>件</small></span>
              <span class="info-box-number">有效：{$good['dataoke']['online']}<small>件</small></span>
            </div>
          </div>
        </div>
       

        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box" style="background:#F3F3F3;">
            <span class="info-box-icon bg-green"><i class="fa fa-calendar-check-o"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">QQ</span>
              <span class="info-box-number">全部：{$good['qq']['all']}<small>件</small></span>
              <span class="info-box-number">有效：{$good['qq']['online']}<small>件</small></span>
            </div>
          </div>
        </div>
        <!-- /.col -->
        <!-- <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box" style="background:#F3F3F3;">
            <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
        
            <div class="info-box-content">
              <span class="info-box-text">New Members</span>
              <span class="info-box-number">2,000</span>
            </div>
          </div>
        </div> -->
   
      </div>
    <div class="row" style="margin-top:10px;">
        <div class="col-xs-12">
            <div id="user" style="height:350px;"></div>
        </div>
    	<div class="col-xs-12 col-sm-6">
    		<div id="sex" style="height:350px;"></div>
    	</div>
    	<div class="col-xs-12 col-sm-6">
    		<div id="come" style="height:350px;"></div>
    	</div>
    	
    </div>
	
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('user'));

    // 指定图表的配置项和数据
    option = {
    title: {
        text: '用户新增统计'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['全部','男性','女性','其他','取消关注']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{$user['week']}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'全部',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[{$user['all']}]
        },
        {
            name:'男性',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[{$user['boy']}]
        },
        {
            name:'女性',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[{$user['girl']}]
        },
        {
            name:'其他',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[{$user['other']}]
        },
        {
            name:'取消关注',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[{$user['none']}]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('sex'));
option = {
    title : {
        text: '用户性别统计',
        subtext: '性别统计',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['男性','女性','其他']
    },
    series : [
        {
            name: '性别统计',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:{$sex['boy']}, name:'男性'},
                {value:{$sex['girl']}, name:'女性'},
                {value:{$sex['other']}, name:'其他'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('come'));

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['搜索关注','邀请关注','手机号注册','再次关注','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:{$come['0']}, name:'搜索关注'},
                {value:{$come['1']}, name:'邀请关注'},
                {value:{$come['2']}, name:'手机号注册'},
                {value:{$come['3']}, name:'再次关注'},
                {value:{$come['4']}, name:'其他'}
            ]
        }
    ]
};

myChart.setOption(option);
</script>
{/block}